{`${data.label} Activity Progress

8e:I[903690,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_4iDh1MHCYDBHEAhqmxUFQtt6yFMK"],"SWRDataProvider"] 90:T1b6b,[V0_FILE]typescriptreact:file="components/kokonutui/apple-activity-card.tsx" "use client"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; interface ActivityData { label: string; value: number; color: string; size: number; current: number; target: number; unit: string; } interface CircleProgressProps { data: ActivityData; index: number; } const activities: ActivityData[] = [ { label: "MOVE", value: 85, color: "#FF2D55", size: 200, current: 479, target: 800, unit: "CAL", }, { label: "EXERCISE", value: 60, color: "#A3F900", size: 160, current: 24, target: 30, unit: "MIN", }, { label: "STAND", value: 30, color: "#04C7DD", size: 120, current: 6, target: 12, unit: "HR", }, ]; const CircleProgress = ({ data, index }: CircleProgressProps) => { const strokeWidth = 16; const radius = (data.size - strokeWidth) / 2; const circumference = radius * 2 * Math.PI; const progress = ((100 - data.value) / 100) * circumference; const gradientId = `gradient-${data.label.toLowerCase()}`; const gradientUrl = `url(#${gradientId})`; return (

); }; const DetailedActivityInfo = () => { return ( {activities.map((activity) => ( {activity.label} {activity.current}/{activity.target} {activity.unit} ))} ); }; export default function AppleActivityCard({ title = "Activity Rings", className, }: { title?: string; className?: string; }) { return (

{title}

{activities.map((activity, index) => ( ))}

); }84:["$","$L8e",null,{"chatId":"SpRue15iWz7","children":["$","$L8f",null,{"data":{"@\"active-block\",\"SpRue15iWz7\",":{"id":"b_fMooBfuhbLy","messageId":"LiWa6UDv5f1uJWK7o46PRfFDajTUddEH","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Open in v0","type":"code-project","project":"Open in v0"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"SpRue15iWz7\",":false,"":null},"children":"$L91"}]}]

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This